<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $, to } from "./index";

onMounted(() => {
  $.onSearch();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">食谱搜索</span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <el-form
        label-width="auto"
        :inline="true"
        :model="_$.query.requestParam"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="搜索条件">
          <el-input v-model="_$.query.requestParam.condition" clearable />
        </el-form-item>
        <el-form-item>
          <el-space wrap>
            <el-button @click="$.onReset">重置</el-button>
            <el-button type="primary" @click="$.onSearch">查询</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>

    <el-space direction="vertical" fill wrap class="w-fill" :size="20">
      <div class="img-All">
        <div class="img-Array" style="cursor: pointer;"@click="router.push('/portal/recipe/Detail?id=' + item.id)"  v-for="item in _$.query.responseParam.records">
          <img src="https://cp1.douguo.com/upload/caiku/e/a/a/400x266_ea7841a98f45d946e53fb3d392ff14ca.jpeg">
          <p>{{item.name }}</p>
        </div>
      </div>
    </el-space>
  </el-space>
</template>

<style scoped>
:v-deep(.disabled .el-upload--picture-card) {
  display: none !important;
}
.img-All {
  display:flex;
  flex-wrap: wrap;
  background-color: #fff;
  justify-content: center;
  >.img-Array {
    padding: 10px 10px;
    >img {
      width: 260px;
      height: 160px;
      border-radius: 10px;
    }
  }
}
</style>
